
<template>
  <div class="_wz_cent_main _wz_PrintLearning">
    <div>
      <div style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;">{{active.deptName}}</div>

      <Card dis-hover :bordered="true" class="_wz_ztList_cont" style="margin-bottom: 10px;">
        <template #title>培训信息</template>
        <div class="_wz_ztList_cont_span">
          培训周期：<span>{{ !!active ? active.trainCoursePlanCreateYear + '年' : '--' }}{{ !!active ? active.trainCoursePlanCreateMonth + '月' : '--' }}</span>
          <Divider type="vertical" />
          培训课程：<span>{{ !!active ? active.trainCoursePlanName : '--' }}</span>
          <Divider type="vertical" />
          课程类型：<span>{{ !!active ? active.trainCoursePlanTypeName : '--' }}</span>
          <Divider type="vertical" />
          经营类型：<span>{{ !!active ? active.deptTransportTypeName : '--' }}</span>
          <Divider type="vertical" />
          培训方向：<span>{{ !!active ? active.trainCoursePlanDirectionName : '--' }}</span><br>
          发布类型：<span>{{ !!active ? active.trainCoursePlanPublish == 0 ? '按身份发布' : '按学员发布' : '--' }}</span>
          <Divider type="vertical" />
          从业身份：<span>{{ !!active ? active.trainCoursePlanPublishValueName : '--' }}</span>
          <Divider type="vertical" />
          随堂测试：
          <span v-if="!!active && active.trainCoursePlanExam === 0">未添加</span>
          <span v-else-if="!!active">{{ (!!active && active.trainCoursePlanExamFinish == 0) ? "未开始" : (!!active && active.trainCoursePlanExamFinish == 1) ? "已完成" : "进行中" }}</span>
          <span v-else>暂无数据</span>
          <Divider type="vertical" />
          课题数量：<span>{{ !!active ? active.trainCoursePlanMaterialNumber + '个' : '--' }}</span>
          <Divider type="vertical" />
          应学时长：<span>{{ !!active ? active.trainCoursePlanTotalDuration + '分钟' : '--' }}</span><br>
          已完成：<span>{{ !!active ? active.trainCoursePlanFinishedNumber + '人' : '--' }}</span>
          <Divider type="vertical" />
          进行中：<span>{{ !!active ? active.trainCoursePlanUnfinishedNumber + '人' : '--' }}</span>
          <Divider type="vertical" />
          未开始：<span>{{ !!active ? active.trainCoursePlanUnstartNumber + '人' : '--' }}</span>
          <Divider type="vertical" />
          培训时间：
          <span style="margin:0 5px 0 0;">{{ !!active ? active.trainCoursePlanBeginDate : '--' }}</span>
          -
          <span style="margin:0 0 0 5px;">{{ !!active ? active.trainCoursePlanEndDate : '--' }}</span>
        </div>
      </Card>


      <div>
        <Card dis-hover :bordered="true" style="margin-bottom: 10px;" class="_wz_ztList_cont">
          <p slot="title">培训情况</p>
          <div class="_wz_PrintLearning_cent"  v-for="item,index in materialData">
            <table style="border-top: 6px solid #2d8cf0;" cellpadding="0" cellspacing="0" border="0">
              <colgroup>
                <col width="100">
                <col>
                <col width="100">
                <col>
              </colgroup>
              <thead>
              <tr>
                <th class="_wz_table_name">从业人员：</th>
                <th>{{item.driverName}}</th>
                <th class="_wz_table_name">驾乘车辆：</th>
                <th>{{item.driverVehicleNo}}</th>
              </tr>
              <tr>
                <th class="_wz_table_name">联系电话：</th>
                <th>{{item.driverPhone}}</th>
                <th class="_wz_table_name">身份证号：</th>
                <th>{{item.driverIdentifyNum}}</th>
              </tr>
              </thead>
              <tbody class="_wz_userList" v-for="items in item.trainCourseStudentPlanTaskList" style="border-top: 6px solid #ff9900;">
              <tr>
                <td class="_wz_table_name">课件名称：</td>
                <td colspan="3"> {{items.materialTrainName}}</td>
              </tr>
              <tr>
                <td class="_wz_table_name">学习时长：</td>
                <td> {{items.trainCourseStudentPlanTaskProcess}}/{{items.trainCourseStudentPlanTaskDuration}}分钟</td>
                <td class="_wz_table_name">完成状态：</td>
                <td style="text-align:center;">
                  {{items.trainCourseStudentPlanTaskFinish === 0 ? "未开始" : items.trainCourseStudentPlanTaskFinish === 1 ? "已完成" : "进行中"}}
                </td>
              </tr>
              <tr>
                <td class="_wz_table_name">开始时间：</td>
                <td>{{items.trainCourseStudentPlanTaskBeginTime}}</td>
                <td class="_wz_table_name">结束时间：</td>
                <td>{{items.trainCourseStudentPlanTaskEndTime}}</td>
              </tr>
              <tr>
                <td class="_wz_table_name">培训图片:</td>
                <td colspan="3">
                  <div v-if="!!items.trainCourseStudentRecordImgList && items.trainCourseStudentRecordImgList.length>0">
                    <div class="_wz_userList_img" v-for="itemt in items.trainCourseStudentRecordImgList" @click="handleView(itemt.imgUrl)">
                      <img :src="apiUrl.imgUrl+itemt.imgUrl" @error="public.imgDispose" />
                      <div class="_wz_userList_img-cover">
                        <Icon type="ios-eye-outline"></Icon>
                      </div>
                    </div>
                  </div>
                  <div v-else>暂无培训证据</div>

                </td>
              </tr>
              </tbody>
              <tbody style="border-top: 6px solid #ff9900;" v-if="item.trainCourseStudentPlanExam === 1 && !!item.examStudentPlan">
              <tr>
                <td class="_wz_table_name">考试名称：</td>
                <td colspan="3">{{item.examStudentPlan.examPlanName}}</td>
              </tr>
              <tr>
                <td class="_wz_table_name">考试分数：</td>
                <td v-if="item.examStudentPlan.examStudentPass == 0">未参加考试</td>
                <td v-else>{{item.examStudentPlan.examStudentScore}}</td>
                <td class="_wz_table_name">及格状态：</td>
                <td v-if="item.examStudentPlan.examStudentPass == 0">未参加考试</td>
                <td v-if="item.examStudentPlan.examStudentPass == 1">考试及格</td>
                <td v-if="item.examStudentPlan.examStudentPass == 2">考试不及格</td>
              </tr>
              <tr>
                <td class="_wz_table_name">正确数量：</td>
                <td>{{!!item.examStudentPlan.examStudentAmount?item.examStudentPlan.examStudentAmount:0}}</td>
                <td class="_wz_table_name">考题总数：</td>
                <td>{{!!item.examStudentPlan.examStudentCorrect?item.examStudentPlan.examStudentCorrect:0}}</td>
              </tr>
              <tr>
                <td class="_wz_table_name">开始时间：</td>
                <td v-if="item.examStudentPlan.examStudentPass == 0">未参加考试</td>
                <td v-else>{{item.examStudentPlan.examStudentAnswerTime}}</td>
                <td class="_wz_table_name">结束时间：</td>
                <td v-if="item.examStudentPlan.examStudentPass == 0">未参加考试</td>
                <td v-else>{{item.examStudentPlan.examStudentSubmitTime}}</td>
              </tr>
              <tr>
                <td class="_wz_table_name">答题情况：</td>
                <td colspan="3">
                  <template v-for="item,index in item.examStudentPlan.examStudentPlanDetailList">
                    <span v-if="item.correctResult == 0" style="display: inline-block;width: 20px;height: 20px;background: #ed4014;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
                    <span v-else-if="item.correctResult == 1" style="display: inline-block;width: 20px;height: 20px;background: #19be6b;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
                    <span v-else style="display: inline-block;width: 20px;height: 20px;background: #ccc;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
                  </template>
                </td>
              </tr>
              <tr>
                <td class="_wz_table_name">考试图片:</td>
                <td colspan="3">
                  <div v-if="!!item.examStudentPlan.examStudentFirstImg && !!item.examStudentPlan.examStudentSecondImg && !!item.examStudentPlan.examStudentThirdImg">
                    <div class="_wz_userList_img" @click="handleView(item.examStudentPlan.examStudentFirstImg)">
                      <img :src="apiUrl.imgUrl+item.examStudentPlan.examStudentFirstImg" @error="public.imgDispose" />
                      <div class="_wz_userList_img-cover">
                        <Icon type="ios-eye-outline"></Icon>
                      </div>
                    </div>
                    <div class="_wz_userList_img" @click="handleView(item.examStudentPlan.examStudentSecondImg)">
                      <img :src="apiUrl.imgUrl+item.examStudentPlan.examStudentSecondImg" @error="public.imgDispose" />
                      <div class="_wz_userList_img-cover">
                        <Icon type="ios-eye-outline"></Icon>
                      </div>
                    </div>
                    <div class="_wz_userList_img" @click="handleView(item.examStudentPlan.examStudentThirdImg)">
                      <img :src="apiUrl.imgUrl+item.examStudentPlan.examStudentThirdImg" @error="public.imgDispose" />
                      <div class="_wz_userList_img-cover">
                        <Icon type="ios-eye-outline"></Icon>
                      </div>
                    </div>
                  </div>
                  <div v-else>暂无考试证据</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </div>
    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

  </div>
</template>

<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'PrintLearning',//组件名称
  components: {},//组件引用
  props: ["materialData",'active'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({


    });


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      props,
    }
  }
})


</script>
<style lang="less">
  ._wz_PrintLearning {
    ._wz_ztList_cont {
      ._wz_ztList_cont_span {
        line-height: 30px;
        color: #ababab;

        span {
          margin: 0 10px 0 0;
          color: #01AAED;
          word-break: break-all;
        }
      }
    }

    ._wz_PrintLearning_cent {
      position: relative;

      border-bottom: 0;
      border-right: 0;
      overflow: hidden;
      width: 100%;//680px; //210mm; //640px;
      margin: auto;

      table {
        width: 100%;//680px;
        border: 1px solid #dcdee2;
        margin: 10px 0;
        border-collapse: collapse;
        color: #515a6e;
        font-size: 12px;

        thead {
          tr {
            th {
              padding: 0 9px;
              min-width: 0;
              height: 40px;
              white-space: nowrap;
              overflow: hidden;
              background-color: #f8f8f9;
              box-sizing: border-box;
              text-align: left;
              text-overflow: ellipsis;
              vertical-align: middle;
              border-bottom: 1px solid #515a6e;
              border-right: 1px solid #515a6e;
            }
          }
        }

        ._wz_table_name {
          text-align: right !important;
        }

        td {
          padding: 0 9px;
          min-width: 0;
          height: 40px;
          box-sizing: border-box;
          text-align: left;
          text-overflow: ellipsis;
          vertical-align: middle;
          border-bottom: 1px solid #515a6e;
          background-color: #fff;
          transition: background-color .2s ease-in-out;
          border-right: 1px solid #515a6e;
        }
      }

      ._wz_userList_img {
        display: inline-block;
        margin: 4px 0.5% -2px;
        width: 16%;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
      }

      ._wz_userList_img img {
        width: 100%;
        height: 100%;
      }

      ._wz_userList_img-cover {
        align-items: center;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
      }

      ._wz_userList_img:hover ._wz_userList_img-cover {

        display: flex;
      }

      ._wz_userList_img-cover i {
        display: block;
        margin: auto;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }


</style>

